<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 500px;
            height: 500px;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        输入：<input type="text" v-model="msg">
        <hr>
        <p>{{a.b.count}}</p>
        <button @click="a.b.count++">加1</button>
    </div>
    <script>
        const VM = new Vue({
            el: "#app",
            data: {
               msg:'',
               a:{
                   b:{
                       count:1
                   }
               }
            },
            watch:{
                //函数式写法
                // msg(){
                //     console.log('zhixingle...');
                // }
                //对象写法
                msg:{
                    handler(){
                        console.log('改变了');
                    }
                },
                a:{
                    handler(){
                        console.log('count改变了');
                    },
                    deep:true,
                    immediate:true
                }
            }
        });
    </script>
</body>

</html>

<!-- 



    https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=35838,36174,31253,35915,36165,34584,36140,36120,36192,36073,35802,35318,26350,35870,36103,36061&wd=nba&req=2&bs=1&pbs=1&csor=1&pwd=1&cb=cb
 -->